<template>
	<view class='container' @touchstart="touchstart" @touchmove="touchmove" @touchend='touchend'>
		<view class="txt_tishi">#双指缩放旋转，单指平移剪裁图片#</view>
		<view class="dz_content">
			<view class="dz_content_top_content" :style="{ 
				         height: mb_pic_pos[3] + 'rpx',
				         width: mb_pic_pos[2] + 'rpx',
				         left: mb_pic_pos[0] + 'rpx',
				         top: mb_pic_pos[1] + 'rpx'
				       }">
				<view class="img_view"
					:style="{ height: mb_pic_pos[3] + 'rpx', width: mb_pic_pos[2] + 'rpx', top: 0, left: 0 }">
					<img :src="img_url" :style="{ 
				         height: scale * img_pos[3] + 'rpx',
				         width: scale * img_pos[2] + 'rpx',
				         left: scale * img_pos[0] + 'rpx',
				         top: scale * img_pos[1] + 'rpx',
				         transform: 'translate(' + stv.offsetX + 'rpx, ' + stv.offsetY + 'rpx) scale(' + stv.scale + ') rotate(' + stv.rotate + 'deg)'
				       }" class="img_ctr" />
				</view>
				<view class="bian_kuan_view" :style="{ 
				        height: mb_pic_pos[3] + 'rpx',
				        width: mb_pic_pos[2] + 'rpx',
				        top: '-2rpx',
				        left: '-2rpx'
				      }">
					<img src="../../../static/resource/icon_tailor_l_t.png" :style="{ left: '-6rpx', top: '-6rpx' }"
						class="bian_kuang" />
					<img src="../../../static/resource/icon_tailor_r_t.png" :style="{ right: '-6rpx', top: '-6rpx' }"
						class="bian_kuang" />
					<img src="../../../static/resource/icon_tailor_l_b.png" :style="{ left: '-6rpx', bottom: '-6rpx' }"
						class="bian_kuang" />
					<img src="../../../static/resource/icon_tailor_r_b.png" :style="{ right: '-6rpx', bottom: '-6rpx' }"
						class="bian_kuang" />
					<view class="fenge_xian_heng" :style="{ left: '0rpx', top: mb_pic_pos[3] / 3 + 'rpx' }"></view>
					<view class="fenge_xian_heng" :style="{ left: '0rpx', top: mb_pic_pos[3] * 2 / 3 + 'rpx' }"></view>
					<view class="fenge_xian_shu" :style="{ top: '0rpx', left: mb_pic_pos[2] / 3 + 'rpx' }"></view>
					<view class="fenge_xian_shu" :style="{ top: '0rpx', left: mb_pic_pos[2] * 2 / 3 + 'rpx' }"></view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="left" @tap="go_back">取消</view>
			<view class="right" @tap="queding">完成</view>
		</view>
	</view>
</template>

<script>
	let mlib = require('mlib/mlib.js');
	export default {
		data() {
			return {
				window_height_rpx: 0,
				mb_pic_pos: [],
				stv: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				},
				scale: 1,
				img_url: '',
				container_size: [100, 100],
				img_pos: [0, 0, 100, 100],
				//触屏相关
				start_touch: 0,
				touch_start_pos: [0, 0],
				touch_status: 0,
				is_move: 0
			}
		},
		onLoad(e) {
			// var item = JSON.parse(e.item)
			// if (item != null) {
			// 	var stv = new Object();
			// 	stv.offsetX = item.imgStv.offsetX;
			// 	stv.offsetY = item.imgStv.offsetY;
			// 	stv.rotate = item.imgStv.rotate;
			// 	stv.scale = item.imgStv.scale;
			// 	this.stv = stv;
			// 	this.container_size = [item.container[2], item.container[3]];
			// 	this.img_url = item.img;
			// 	//初始化图片位置
			// 	this.img_pos = [0, 0, this.container_size[0], this.container_size[1]];
			// }

			if (mlib.tailor_img != null) {
				var stv = new Object();
				stv.offsetX = mlib.tailor_img.imgStv.offsetX;
				stv.offsetY = mlib.tailor_img.imgStv.offsetY;
				stv.rotate = mlib.tailor_img.imgStv.rotate;
				stv.scale = mlib.tailor_img.imgStv.scale;
				this.stv = stv;
				this.container_size = [mlib.tailor_img.container[2], mlib.tailor_img.container[3]];
				this.img_url = mlib.tailor_img.img;
				//初始化图片位置
				this.img_pos = [0, 0, this.container_size[0], this.container_size[1]];
			}else{
				uni.showModal({
					title: '提示',
					content: '没有内容，返回首页',
					success: function (res) {
						uni.reLaunch({
							url:'/pages/index'
						})
					}
				});
			}

			mlib.tailor_stv = null;
			mlib.cPos = [0, 0];
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					var window_height_rpx = res.windowHeight * 750 / res.windowWidth;
					that.rpx_to_px = res.windowWidth / 750
					that.window_height_rpx = window_height_rpx
					that.inite_pos();
				},
			})
		},
		methods: {
			/**
			 * 触摸开始
			 */
			touchstart: function(e) {
				console.log('触屏开始');
				//单点触摸
				if (e.touches.length == 1) {
					this.is_move = 0;
					this.touch_status = 0;
					this.touch_start_pos[0] = e.touches[0].pageX;
					this.touch_start_pos[1] = e.touches[0].pageY;
				} else //多点触摸
				{
					this.is_move = -1;
					this.touch_status = 1;
					var diff_x = e.touches[0].clientX - e.touches[1].clientX;
					var diff_y = e.touches[0].clientY - e.touches[1].clientY;
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					this.start_distance = Math.sqrt(x + y);
					this.start_scale = this.stv.scale;
					this.start_angle = 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI) - this.stv.rotate;
				}
			},
			/**
			 * 触摸移动
			 */
			touchmove: function(e) {
				//单点触摸
				if (this.touch_status == 0) {
					var rpx_to_px = this.rpx_to_px;
					this.is_move = 1;
					var change_x = e.touches[0].pageX - this.touch_start_pos[0];
					var change_y = e.touches[0].pageY - this.touch_start_pos[1];
					this.stv.offsetX += change_x / rpx_to_px;
					this.stv.offsetY += change_y / rpx_to_px;
					this.touch_start_pos[0] = e.touches[0].pageX;
					this.touch_start_pos[1] = e.touches[0].pageY;
				} else //多点触摸
				{
					if (e.touches.length == 1) {
						return;
					}
					var diff_x = e.touches[0].clientX - e.touches[1].clientX;
					var diff_y = e.touches[0].clientY - e.touches[1].clientY;
					let x = Math.pow(diff_x, 2)
					let y = Math.pow(diff_y, 2)
					//缩放
					var dis = Math.sqrt(x + y);
					//旋转
					var angle = 360 * Math.atan(diff_y / diff_x) / (2 * Math.PI);
					this.stv.scale = this.start_scale + this.start_scale * (dis - this.start_distance) / this
						.start_distance;
					if (Math.abs(this.stv.rotate - angle + this.start_angle) <= 90) {
						this.stv.rotate = angle - this.start_angle;
					}
				}
			},
			/**
			 * 触摸结束
			 */
			touchend: function(e) {
				console.log('触摸结束');
			},
			/**
			 * 取消
			 */
			go_back: function() {
				uni.navigateBack({})
			},
			/**
			 * 确定
			 */
			queding: function() {
				console.log('queding');
				var stv = this.stv;
				stv.offsetX = stv.offsetX / this.scale;
				stv.offsetY = stv.offsetY / this.scale;
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.finish_tailor(stv);
				uni.navigateBack({
					delta: 1
				})
			},
			inite_pos: function() {
				var muban_width = this.container_size[0];
				var muban_height = this.container_size[1];
				var max_width = 690;
				var max_heght = this.window_height_rpx - 320;
				if ((muban_width / max_width) <= (muban_height / max_heght)) {
					this.mb_pic_pos[2] = max_heght * muban_width / muban_height;
					this.mb_pic_pos[3] = max_heght;
					this.mb_pic_pos[0] = (max_width - this.mb_pic_pos[2]) / 2;
					this.mb_pic_pos[1] = 0;
				} else {
					this.mb_pic_pos[0] = 0;
					this.mb_pic_pos[2] = max_width;
					this.mb_pic_pos[3] = max_width * muban_height / muban_width;
					this.mb_pic_pos[1] = (max_heght - this.mb_pic_pos[3]) / 2;
				}
				var scale = this.mb_pic_pos[2] / muban_width;
				//stv处理
				this.stv.offsetX = scale * this.stv.offsetX;
				this.stv.offsetY = scale * this.stv.offsetY;
				this.scale = scale
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		min-height: 100%;
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		background-color: #F9F9F9;
	}

	.txt_tishi {
		width: 750rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		color: #999999;
		font-size: 30rpx;
		position: absolute;
		left: 0rpx;
		top: 70rpx;
	}

	.dz_content {
		position: absolute;
		top: 120rpx;
		left: 32rpx;
		width: 690rpx;
	}

	.dz_content_top_content {
		position: absolute;
		/* overflow: hidden; */
	}

	.foot {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) - 14px);
	}

	.foot .left {
		width: 375rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: 400;
		color: rgba(86, 86, 86, 1);
		background-color: white;
	}

	.foot .right {
		width: 375rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: 400;
		color: #565656;
		background-color: #FFF602;
	}

	.img_view {
		position: absolute;
		overflow: hidden;
	}

	.bian_kuan_view {
		position: absolute;
		border: 2rpx solid rgba(153, 153, 153, 1);
	}

	.bian_kuang {
		width: 46rpx;
		height: 46rpx;
		position: absolute;
	}

	.fenge_xian_heng {
		border: 1rpx dashed #999999;
		width: 100%;
		position: absolute;
	}

	.fenge_xian_shu {
		border: 1rpx dashed #999999;
		height: 100%;
		position: absolute;
	}

	.img_ctr {
		position: absolute;
	}
</style>